import React from 'react';
import HomeHeader from '@/views/Home/components/HomeHeader/HomeHeader';
import HomeNavs from '@/views/Home/components/HomeNavs/HomeNavs';
import KnowledgeList from '@/views/Home/components/KnowledgeList/KnowledgeList';
import { Swiper, Tabs } from 'antd-mobile';
import { banners } from '@/constants/home';
import FollowDoctor from '@/views/Home/components/FollowDoctor/FollowDoctor';
import './Home.scss';


const Home: React.FunctionComponent = () => {
  return (
    <div className="home">
      {/*头部*/}
      <HomeHeader></HomeHeader>
      {/*九宫格导航栏*/}
      <HomeNavs></HomeNavs>
      {/*轮播图*/}
      <Swiper autoplay loop>
        {banners.map((banner) => <Swiper.Item key={banner}><img src={banner} alt="" /></Swiper.Item>)}
      </Swiper>
      {/*Tabs栏*/}
      <Tabs>
        <Tabs.Tab title="关注" key="like">
          {/*关注的医生*/}
          <FollowDoctor></FollowDoctor>
          {/*文章列表list组件*/}
          <KnowledgeList type="like"></KnowledgeList>
        </Tabs.Tab>
        <Tabs.Tab title="推荐" key="recommend">
          {/*文章列表list组件*/}
          <KnowledgeList type="recommend"></KnowledgeList>
        </Tabs.Tab>
        <Tabs.Tab title="减脂" key="fatReduction">
          {/*文章列表list组件*/}
          <KnowledgeList type="fatReduction"></KnowledgeList>
        </Tabs.Tab>
        <Tabs.Tab title="饮食" key="food">
          {/*文章列表list组件*/}
          <KnowledgeList type="food"></KnowledgeList>
        </Tabs.Tab>
      </Tabs>
    </div>
  );
};

export default Home;